<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>会员互动</title>
    <!-- Bootstrap -->
    <link href="../assets/css/mui.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/boss_content.css" rel="stylesheet" />
    <style type="text/css">
      
    </style>
  </head>

  <body>
    <header id="header" class="mui-bar mui-bar-nav">
      <h1 class="mui-title">会员互动</h1>
      <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">
      <div class="aggregate-time-list mui-row kuaibgColor jy_table_list">
        <div class="mui-col-xs-6 aggregate-time-active">优惠赠送</div>
        <div class="mui-col-xs-6">客服消息</div>
      </div>
      <div class="jy_contet_list">
        <div class="yhzs-img-item kuaibgColor">
          <div class="mui-pull-left yhzs-img-item-title">图片</div>
          <div class="mui-pull-right yhzs-img-item-content">
            <span class="yiyou">
              <img src="../assets/images/li2.png" class="yhzs-img-pic">
              <img src="../assets/images/li1.png" class="yhzs-img-pic">
            </span>
            <span class="add-img">
              <img src="../assets/images/tupianjia.png" class="yhzs-img-pic">
            </span>
          </div>
        </div>
        <div class="yhzs-item kuaibgColor" onclick="titletitle()">
          <span class="mui-pull-left yhzs-item-title">标题</span>
          <i class="icon iconfont icon-xiangyou1 icon-size mui-pull-right"></i>
          <span class="mui-pull-right yhzs-item-content yhzs-title-content">关注我，精彩好礼送不停</span>
        </div>
        <div class="yhzs-item kuaibgColor" onclick="integralGift()">
          <span class="mui-pull-left yhzs-item-title">赠送积分</span>
          <i class="icon iconfont icon-xiangyou1 icon-size mui-pull-right"></i>
          <span class="mui-pull-right yhzs-item-content yhzs-integral-content">100积分</span>
        </div>
        <div class="yhzs-item kuaibgColor" onclick="giftKaquan()">
          <span class="mui-pull-left yhzs-item-title">送卡券</span>
          <i class="icon iconfont icon-xiangyou1 icon-size mui-pull-right"></i>
          <span class="mui-pull-right yhzs-item-content yhzs-kaquan-content">30元代金券</span>
        </div>
        <div class="yhzs-item-textarea kuaibgColor">
          <div class="yhzs-item-textarea-title">备注</div>
          <textarea placeholder="请输入内容"></textarea>
        </div>
        <div style="height: 60px;"></div>
        <div class="vip-footer kuaibgColor mui-row">
          <div class="mui-col-xs-6 footer-btnone">
            <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined orange-btn">发送消息</button>
          </div>
          <div class="mui-col-xs-6 footer-btntwo">
            <button type="button" class="mui-btn mui-btn-success mui-btn-outlined green-btn">返回</button>
          </div>
        </div>
      </div>
      <div class="jy_contet_list hidden">
        <div class="mui-input-row menber-hudong-textarea">
          <textarea placeholder="请输入内容"></textarea>
        </div>
        <div style="height: 60px;"></div>
        <div class="vip-footer kuaibgColor mui-row">
          <div class="mui-col-xs-6 footer-btnone">
            <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined orange-btn">发送消息</button>
          </div>
          <div class="mui-col-xs-6 footer-btntwo">
            <button type="button" class="mui-btn mui-btn-success mui-btn-outlined green-btn">返回</button>
          </div>
        </div>
      </div>
    </div>
    <div class="nonekuai">
      <div class="shadow hidden"></div>
      <div class="title-content none-content hidden">
        <div class="none-item title-item">关注我，优惠好礼送不停</div>
        <div class="none-item title-item">优惠券</div>
        <div class="none-cancle">取消</div>
      </div>
      <div class="jifen-content none-content hidden">
        <div class="none-item integral-item">10积分</div>
        <div class="none-item integral-item">20积分</div>
        <div class="none-item integral-item">30积分</div>
        <div class="none-cancle">取消</div>
      </div>
      <div class="kaquan-content none-content hidden">
        <div class="none-item kaquan-item">10元代金券</div>
        <div class="none-item kaquan-item">30元代金券</div>
        <div class="none-cancle">取消</div>
      </div>
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/mui.js"></script>
    <script type="text/javascript">
      // table切换选中第几个下面的第几个div显现
      $('.jy_table_list div').on('click', function() {
          var index = $(this).index();
          $('.jy_table_list div').removeClass("aggregate-time-active")
          $('.jy_table_list div').eq(index).addClass("aggregate-time-active")
          $('.jy_contet_list').addClass('hidden')
          $('.jy_contet_list').eq(index).removeClass("hidden")
        })
        //标题
      function titletitle() {
        $('.shadow').removeClass('hidden');
        $('.title-content').removeClass('hidden')
      }
      $('.title-content .title-item').on('click', function() {
          $('.shadow').addClass('hidden');
          $('.title-content').addClass('hidden')
          $(".yhzs-title-content").html($(this).html())
        })
        //赠送积分
      function integralGift() {
        $('.shadow').removeClass('hidden');
        $('.jifen-content').removeClass('hidden')
      }
      $('.jifen-content .integral-item').on('click', function() {
          $('.shadow').addClass('hidden');
          $('.jifen-content').addClass('hidden')
          $(".yhzs-integral-content").html($(this).html())
        })
        //送卡券
      function giftKaquan() {
        $('.shadow').removeClass('hidden');
        $('.kaquan-content').removeClass('hidden')
      }
      $('.kaquan-content .kaquan-item').on('click', function() {
        $('.shadow').addClass('hidden');
        $('.kaquan-content').addClass('hidden')
        $(".yhzs-kaquan-content").html($(this).html())
      })
      $('.none-content .none-cancle').on('click', function() {
        $('.shadow').addClass('hidden');
        $('.title-content').addClass('hidden')
        $('.jifen-content').addClass('hidden')
        $('.kaquan-content').addClass('hidden')
      })
    </script>
  </body>

</html>